<template>
  <div class="net-index list-page">
    <div class="data-view function-area">
      <div class="data-box">
        <div class="label">总网格数</div>
        <div class="value">12</div>
      </div>

      <div class="data-box">
        <div class="label">总触发压力</div>
        <div class="value">33280 <span class="warning">资金不足!</span></div>
      </div>

      <div class="data-box">
        <div class="label">下次集中触发压力</div>
        <div class="value">33280 <span class="warning">资金不足!</span></div>
      </div>

      <div class="btn-area">
        <el-button type="primary" @click="router.push('net-edit')">添加网格</el-button>
      </div>
    </div>

    <div class="list-area">
      <el-table>
        <el-table-column label="名字"></el-table-column>
        <el-table-column label="代码"></el-table-column>
        <el-table-column label="成本"></el-table-column>
        <el-table-column label="持有数量"></el-table-column>
        <el-table-column label="当前价格"></el-table-column>
        <el-table-column label="距离买入"></el-table-column>
        <el-table-column label="买入所需"></el-table-column>
        <el-table-column label="距离卖出"></el-table-column>
        <el-table-column label="持有收益"></el-table-column>
        <el-table-column label="持有收益"></el-table-column>
        <el-table-column label="操作">
          <el-button type="text">成交记录</el-button>
          <el-button type="text">编辑</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style lang="scss" scoped>
@import '@/assets/list.scss';

.net-index {
  .data-view {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    .data-box {
      padding: 30px;
      border-radius: 10px;
      background: #f3f3f3;
    }
  }
  .warning {
    font-size: 12px;
    color: red;
  }
}
</style>
